<template>
  <div class="home">
    <el-menu router class="el-menu-demo headNav d-flex jc-between ai-center" mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    >
    <!-- 图标 -->
    <div></div>
    <!-- 导航 -->
      <div class="d-flex">
      <el-menu-item :class="{active1: active === i}" v-for="(item,i) in hearderList" :key="i" @click="getAsideList(i)"><i class="iconNav" :class="item.icon"></i>{{item}}</el-menu-item>
      </div>
    <!-- 用户下拉菜单 -->
    
      <el-dropdown class="">

      <span class="el-dropdown-link">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <div>林观富</div>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item><span @click="$router.push('/index/AccountSetting')">修改密码</span></el-dropdown-item>
        <el-dropdown-item><span @click="exit">退出</span></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    
    
  </el-menu>
    <el-container style="height: 100%; border: 1px solid #eee">

      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu router :default-active="$route.path">
            <template slot="title"><i class="el-icon-message"></i></template>
            <el-menu-item :index="item.path" v-for="(item,i) in menuList" :key="i">
              {{item.name}}
          </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>


  export default {
    data(){
      return {
         
         menuList: [
         

         ],
         user: {},
         active: 1,
         hearderList: [],
      }
    },
    created(){
      //获取第一个侧边栏列表信息
        this.getAsideList(0);

        this.getHearderList()
    },
    methods: {
      getHearderList(){
        this.$router.options.routes.forEach((item,i) => {
          if (item.name) {
              this.hearderList.push(item.name)
          }
        })
        
      },
      getAsideList(index){
         this.active = index;
         this.menuList = this.$router.options.routes[index+1].children
         
      },
      async getLoginUser(){
        const res = await this.$http("/api/login/name.do");
        this.user = res.data
      },
      async exit(){
        
        // const res = await this.$http.post('/api/logout')
        this.$router.push('/login')
        //清空-----
      }

    },
  }
</script>

<style>
  .active1 {
    color: #ffd04b !important;
    border-bottom: 2px solid #ffd04b !important;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown-link {
    color: #fff;
    display: d-flex;
    align-items: center;
  }

</style>
